<template>
      <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count">剩余<strong>{{shengyu}}</strong></span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a  :class="{selected:flag === 1}" @click="$emit('changFlag',1)" href="#/" >全部任务</a>
        </li>
        <li>
          <a  :class="{selected:flag === 2}" @click="$emit('changFlag',1)" href="#/active">进行中</a>
        </li>
        <li>
          <a  :class="{selected:flag === 3}" @click="$emit('changFlag',1)" href="#/completed">已完成</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="$emit('clearCompleted',)">清除已完成</button>
    </footer>
</template>

<script>
export default {
props:{
  list:Array,
  flag:{
    required:true,
    type:Number
  }
},
computed: {
  shengyu (){
    return this.list.filter(item => item.isDone === false).length
  }
}
}
</script>

<style>

</style>